<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>全部菜单</span>
      <div>
        <el-button type="primary" @click="addmeun">新建菜单</el-button>
        <el-button icon="el-icon-refresh" @click="refresh"></el-button>
      </div>
    </div>
    <div class="container">
     
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope">
              <div v-if="scope.row.isNode == 1">{{scope.row.title}}</div>
              <div v-if="scope.row.isNode == 0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{scope.row.title}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="index" label="链接"></el-table-column>
          <el-table-column label="展开">
             <template slot-scope="scope">
              <div>{{scope.row.isExpand == 1?'是':'否'}}</div>
            </template>
          </el-table-column>
          <el-table-column label="有效">
             <template slot-scope="scope">
              <div>{{scope.row.isEnable == 1?'是':'否'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="sortCode" label="排序"></el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="updata(scope.row)">修改</el-button>
              <el-button v-if="scope.row.isEnable == 1" type="text" size="small" @click="deletes(scope.row.id)">停用</el-button>
              <el-button v-if="scope.row.isEnable == 0" type="text" size="small" @click="meunenable(scope.row.id)">启用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <br>
      <br>
       <!-- 新建菜单 -->
      <el-dialog v-dialogDrag title="新建菜单" :visible.sync="eqma" width="45%">
        <el-form
          :model="menuinfo"
          status-icon
          ref="menuinfo"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item label="上级" >
           <el-select class="servicelevel" v-model="menuinfo.menuid" placeholder="选择节点">
                <el-option keys="1" label="根节点" :value="0"></el-option>
                <el-option v-for="(val, index) in menulists" :key="index" keys="2" :label="val.title" :value="val.id"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="名称" >
           <el-input type="text" v-model="menuinfo.title" placeholder="请输入菜单名称" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="链接">
            <el-input type="text" v-model="menuinfo.index" placeholder="请输入链接地址" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input type="number" v-model="menuinfo.sortCode"  placeholder='请输入排序' autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="eqma = false">取消</el-button>
          <el-button type="primary" @click="menuysave()">确定</el-button>
        </span>
      </el-dialog>
      <!-- 修改菜单 -->
      <el-dialog v-dialogDrag title="修改菜单" :visible.sync="updatameun" width="45%">
        <el-form
          :model="menuinfo"
          status-icon
          ref="menuinfo"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item label="上级" >
           <el-select class="servicelevel" v-model="menuinfo.menuid" placeholder="选择节点">
                <el-option keys="1" label="根节点" :value="0"></el-option>
                <el-option v-for="(val, index) in menulists" :key="index" keys="2" :label="val.title" :value="val.id"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="名称" >
           <el-input type="text" v-model="menuinfo.title" placeholder="请输入菜单名称" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="链接">
            <el-input type="text" v-model="menuinfo.index" placeholder="请输入链接地址" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input type="number" v-model="menuinfo.sortCode"  placeholder='请输入排序' autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updatameun = false">取消</el-button>
          <el-button type="primary" @click="menuupdate()">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { menulist,getNodeMenu, menuysave,meundelete,meunenable,getAllMenu,menuupdate } from "@/api/api";
export default {
  name: "item-one",
  data: function() {
    return {
      visible: false,
      merchantarr: [],
      eqma: false,
      updatameun: false,
      menuinfo:{
        menuid:"",
        title:"",
        index:"",
        sortCode:"",
        meunid:""
      },
      menulists:"",
    };
  },
  created() {
    this.$store.dispatch("getNewNum", 6);
    // console.log(this.$store.state.changableNum);
    // console.log(this.$store.state.showFooter);
    // console.log(this.$store.state.logininfo);
    this.menulist();
  },
  methods: {
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    // 打开新增菜单
    addmeun(){
      this.getNodeMenu()
      this.eqma = true
      this.menuinfo.menuid = '',
      this.menuinfo.title = '',
      this.menuinfo.index = '',
      this.menuinfo.sortCode = ''
    },
    // 刷新
    refresh() {
      this.$router.replace({
        path: "/refresh",
        query: {
          t: Date.now()
        }
      });
    },
    //多选框
    handleSelectionChange(val) {
      console.log(val);
    },
    // 节点列表
    getNodeMenu(){
      getNodeMenu({}).then(res => {
        // console.log(res);
        this.menulists = res.data
      });
    },
    // 菜单列表
    menulist(level) {
      menulist({
      }).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage. removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantarr = res.data;
        }
      });
    },
    // addmeun
    menuysave(){
      this.eqma = false;
      // console.log(this.menuinfo)
      menuysave({
        parentId:this.menuinfo.menuid,
        title:this.menuinfo.title,
        index:this.menuinfo.index,
        sortCode:this.menuinfo.sortCode
      }).then(res => {
        console.log(res)
        if(res.code == 200){
           this.$message({
            message: '添加成功',
            type: 'success'
          });
        }else{
          this.$message.error(res.message);
        }
      });
    },
    // 修改meun
    menuupdate(){
      menuupdate({
        parentId:this.menuinfo.menuid,
        title:this.menuinfo.title,
        index:this.menuinfo.index,
        sortCode:this.menuinfo.sortCode
      },this.meunid).then(res => {
        console.log(res)
        if(res.code == 200){
           this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.menulist()
          this.getAllMenu()
          this.updatameun = false
        }else{
          this.$message.error(res.message);
        }
      });
    },
    // 停用meun
    deletes(val){
       meundelete({
       
      },val).then(res => {
        console.log(res)
        if(res.code == 200){
           this.$message({
            message: '已停用',
            type: 'success'
          });
          this.getAllMenu()
          this.refresh()
        }else{
          this.$message.error(res.message);
        }
      });
    },
    // 启用meun
    meunenable(val){
       meunenable({
      },val).then(res => {
        console.log(res)
        if(res.code == 200){
           this.$message({
            message: '已启用',
            type: 'success'
          });
          this.getAllMenu()
          this.refresh()
        }else{
          this.$message.error(res.message);
        }
      });
    },
    // 更新菜单
    getAllMenu(){
       let userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
      getAllMenu({
        roleId:userinfo.rolesId
      }).then(res => {
        sessionStorage.setItem('menuList',JSON.stringify(res.data))
      });
    },
    // 修改meun
    updata(val){
      this.getNodeMenu()
      this.updatameun = true
      this.meunid = val.id
      this.menuinfo.menuid = val.parentId
      this.menuinfo.title = val.title
      this.menuinfo.index = val.index
      this.menuinfo.sortCode = val.sortCode
    }
  }
};
</script>
<style scoped lang='less'>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 60%;
}
.servicelevel {
  width: 20%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    margin-right: 5px;
  }
  .swarning {
    color: red;
  }
  .warning {
    color: #f9607d;
  }
}

</style>